<template>
  <div class="logs_frame"> 
    <div class="logs_data" style="overflow-y:scroll">
        <el-table :data="logs">
            <el-table-column prop="logsId" label="日志ID"/>
            <el-table-column prop="userId" label="用户ID"/>
            <el-table-column prop="requestTime" label="请求时间"/>
            <el-table-column prop="moduleName" label="模块名称"/>
            <el-table-column prop="requestIp" label="请求IP"/>
            <el-table-column prop="requestType" label="请求方式"/>

            <el-table-column prop="methodName" label="接口名称"/>
            <el-table-column type="expand" label="详情">
                <template slot-scope="data">
                    <el-form inline class="demo-table-expand"
                     style="font-weight:bold">
                        <el-form-item label="耗时">
                            <span>{{data.row.costTime}}ms</span>
                        </el-form-item>
                        <el-form-item label="请求参数">
                                <JsonViewer :value="parse(data.row.requestParam)" :expand-depth="1"></JsonViewer>
                        </el-form-item>
                        <el-form-item label="响应结果">
                            <JsonViewer :value="parse(data.row.requestResult)" :expand-depth="1"></JsonViewer>
                        </el-form-item>
                        </el-form>
                </template>
            </el-table-column>
        </el-table>
    </div>
  <div style="height:6%;position:absolute;bottom:2%;width:98;left:1%">
    <el-pagination
  background
  layout="prev, pager, next"
  :total="count"
  @current-change="changePage"
  >
</el-pagination>
     </div>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import {mapState} from 'vuex'
export default {
name:'LogsManage',
data(){
    return {
        logs:[],
        count:0,
        current:1
    }
},
props:{
process:{
    type:Object,
    required:true
}
},
mounted(){
    this.__init()
},
components:{
JsonViewer
},
methods:{
    __init(){
        this.$basicAxios(this.$manage.getLogs(this.token,1,10),(resp)=>{
            this.logs = resp.data.data
        })
        this.$basicAxios(this.$manage.getLogCount(this.token),(resp)=>{
            this.count = resp.data.data
        })
       // console.log(this.process)
        this.$pubsub.subscribe(`${this.process.process_id}:refresh`,this.refresh)
    },
    changePage(page){
        this.current = page
        this.$basicAxios(this.$manage.getLogs(this.token,page,10),(resp)=>{
            this.logs = resp.data.data
        })
    },
    parse(str){
        return eval('('+str+')')
    },
    refresh(name){
        // 刷新数据 但是current不刷新
        this.changePage(this.current);
    }
},
computed:{
    ...mapState("userAbout",['token'])
}
}
</script>

<style>
.logs_frame{
    width:100%;
    height:100%;
}
.logs_data{
    width:98%;
    margin-left: 1%;
    height:90%;
    font-weight: bolder;
}
</style>